<template>
  <a-modal
      :title="title"
      :width="800"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :footer="null"
      cancelText="关闭">

    <table id="table_report" class="table table-striped table-bordered table-hover">

      <tr>
        <td style="width:90px;text-align: right;padding-top: 80px;">基本信息:</td>
        <td>
          <p style="float: left;">

            停车场名称：<span id="parkName">
           {{ result.parkName }}
                    </span><br>


            车牌号：<span id="plateNo">
           {{ result.plateNo }}
                   </span><br>


            车辆类型：<span id="carType" v-text="custCarType(result.carType)">
           {{ result.carType }}
                    </span><br>


            车辆性质：<span id="carNature" v-text="custCarNature(result)">
           {{ result.carNature }}
                    </span><br>


            车辆进场时间：<span id="carEnterTime">
           {{ result.carEnterTime }}
                    </span><br>


            车辆状态：<span id="isOut" v-text="custIsOut(result.isOut)">
           {{ result.isOut }}
                    </span><br>


            创建时间：<span id="createTime">
                    {{ result.createTime }}
                              </span><br>


            抓拍图片：<span id="imgPath">
            <img
                style="max-width:55px;max-height:55px;min-height:20px;min-width:20px;text-align:center;cursor:pointer;border:1px #BFBFBF solid;padding: 2px 2px 2px 2px;background-color:white;"
                v-if="result.imgPath != null" preview :src="result.imgPath"/>
            <!-- <img v-if="result.imgPath != null" preview :src="result.imgPath"  /> -->
            </span><br>
          </p>
        </td>
      </tr>

      <tr>
        <td style="width:90px;text-align: right;padding-top: 60px;">设备详情:</td>
        <td>
          <p style="float: left;">
            车场编号：<span id="parkCode">
                                      {{ result.parkCode }}
                                                </span><br>
            设备序列号：<span id="serialNo">
                                    {{ result.serialNo }}
                                              </span><br>
            <span id="armCode" v-show="result.armCode">入口编号：{{ result.armCode }}</span><br v-show="result.armCode">
            入口名称：<span id="armName">
                                  {{ result.armName }}
                                            </span><br>
            备注：<span id="remark">
                                  {{ result.remark }}
                                            </span><br>


            <span id="ipAddr" v-show="result.ipAddr">设备ip地址：{{ result.ipAddr }}</span><br v-show="result.ipAddr">

            更新时间：<span id="updateTime">
                                  {{ result.updateTime }}
                                            </span><br>
          </p>
        </td>
      </tr>
      <tr>
        <td style="text-align: center;" colspan="10">
          <a-button type="primary" @click="close">关闭</a-button>
        </td>
      </tr>
    </table>

  </a-modal>
</template>

<script>
import {httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import moment from "moment"
import VuePreview from 'vue-preview'


export default {
  name: "parkCarEnterLogModal",
  data() {
    return {
      title: "操作",
      visible: false,
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      result: {},
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: "/parking/parkCarEnterLog/add",
        edit: "/parking/parkCarEnterLog/edit",
      },
    }
  },
  created() {
  },
  methods: {
    add() {
      this.edit({});
    },
    edit(record) {
      Object.assign(this.result, record);
      this.visible = true;
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if (!this.model.id) {
            httpurl += this.url.add;
            method = 'post';
          } else {
            httpurl += this.url.edit;
            method = 'put';
          }
          let formData = Object.assign(this.model, values);
          //时间格式化
          formData.updateTime = formData.updateTime ? formData.updateTime.format('YYYY-MM-DD HH:mm:ss') : null;

          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })


        }
      })
    },
    handleCancel() {
      this.close()
    },

    custCarType(t) {
      if (t === 0 || t === '0') {
        return '无牌车'
      } else if (t === 1 || t === '1') {
        return '有牌车'
      } else {
        return t
      }
    },
    custCarNature(t) {
      if (t.carNature === 0 || t.carNature === '0') {
        if(t.carTypeNo ==="-1" || t.carTypeNo === -1){
          return "内部车";
        }
        return '临时车'
      } else if (t.carNature === 1 || t.carNature === '1') {
        return '月租车'
      } else if (t.carNature === 2 || t.carNature === '2') {
        return '储值车'
      } else if (t.carNature === 3 || t.carNature === '3') {
        return '军警车'
      }
    },
    custIsOut(t) {
      if (t === 0 || t === '0') {
        return '未出场'
      } else if (t === 1 || t === '1') {
        return '已出场'
      } else {
        return t
      }
    }
  }
}
</script>


<style lang="less" scoped>

</style>
